<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>美元汇率</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="pageContentWhole pageContentWhole_1">
      <a-card>
          <div class="card-title hasContent">当前汇率</div>
          <a-row :gutter="[0]">
            <a-col :span="12">
              <p>1美元 =
                <span v-if="disabled">{{currentNumber}}</span>
                <a-input-number v-if="!disabled" v-model="currentNumber"/>
                元人民币
                <a-button type="primary" @click="saveRate" :loading="loading" style="margin-left:20px;">{{optName}}</a-button>
              </p>
            </a-col>
          </a-row>
      </a-card>
    </div>
    <div class="pageContentWhole pageContentWhole_1">
      <a-card>
          <div class="card-title hasContent" style="margin-bottom:0px;">历史汇率</div>
          <a-row>
            <a-col :span="24">
              <a-table :columns="columns" :data-source="tableData" :loading="tloading" class="tableMargin" :pagination="pagination" rowKey="id">
                <template slot="rn" slot-scope="text, record, index">{{index + 1}}</template>
              </a-table>
            </a-col>
          </a-row>
      </a-card>
    </div>
  </div>
</template>

<script>
import {queryExchangeRateList, addExchangeRate} from '@/api/systemPersonnelManage'

export default {
  data () {
    return {
      loading: false,
      disabled: true,
      currentNumber: null,
      tloading: false,
      columns: [{
        title: '序号',
        width: 60,
        scopedSlots: {customRender: 'rn'}
      }, {
        title: '汇率（美元兑人民币）',
        dataIndex: 'rate',
        ellipsis: true
      }, {
        title: '开始使用时间',
        dataIndex: 'beginTime',
        ellipsis: true
      }, {
        title: '结束使用时间',
        dataIndex: 'endTime',
        ellipsis: true
      }, {
        title: '修改人',
        dataIndex: 'operator',
        ellipsis: true
      }],
      tableData: [],
      pagination: {},
      pageNum: 1,
      pageSize: 10
    }
  },
  computed: {
    optName () {
      return this.disabled ? '编辑' : '保存'
    }
  },
  methods: {
    handleSubmit () {
      this.tloading = true
      queryExchangeRateList({
        status: 0,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(rsp => {
        this.tloading = false
        this.tableData = rsp.data.list
        this.pagination = {
          current: this.pageNum,
          pageSize: rsp.data.pageSize,
          total: rsp.data.total,
          showQuickJumper: false,
          showSizeChanger: true,
          showTotal: total => `共${total}条记录 第${this.pageNum}/${rsp.data.pages}页`,
          onChange: pageNum => {
            this.pageNum = pageNum
            this.handleSubmit()
          },
          onShowSizeChange: (current, size) => {
            this.pageNum = current
            this.pageSize = size
            this.handleSubmit()
          }
        }
      })
    },
    saveRate () {
      if (!this.$root._bc.edit) {
        this.$message.error('您无此权限！')
        return
      }
      if (!this.disabled) {
        if (!this.currentNumber) {
          this.$message.error('请输入正确汇率')
          return false
        }
        this.loading = true
        addExchangeRate({rate: this.currentNumber}).then(rsp => {
          this.$message.success('修改成功')
          this.disabled = !this.disabled
          this.loading = false
          this.handleSubmit()
        }).catch(() => { this.loading = false })
      } else {
        this.disabled = !this.disabled
      }
    }
  },
  created () {
    this.handleSubmit()
    queryExchangeRateList({
      status: 1,
      pageNum: this.pageNum,
      pageSize: this.pageSize
    }).then(rsp => {
      this.currentNumber = rsp.data.list[0].rate
    })
  }
}
</script>

<style lang="less" scoped>
.ant-card {
  margin-bottom: 24px;
  border: none;
  .card-title {
    position: relative;
    padding-left: 16px;
    font-size: 18px;
    line-height: 1;
    color: #000;
    &:before {
      content: "";
      width: 5px;
      height: 18px;
      background: #1890ff;
      border-radius: 4px;
      position: absolute;
      left: 0;
      top: -1px;
    }
  }
  .hasContent {
    margin-bottom: 20px;
  }
  .ant-col-12{ padding-right: 50px;}
}
.pageContentWhole_1{ padding:10px 0 0 0 ;}
</style>
